import React, {Component} from 'react'
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";

import './App.css';

export default class App extends Component {

  //初始化状态
  state = {
    todos: [
      {id: 1, name: '吃蛋', done: true},
      {id: 2, name: '看书', done: true},
      {id: 3, name: '听歌', done: true},
      {id: 4, name: '打飞机', done: false},
      {id: 5, name: '看电影', done: true},
      {id: 6, name: '看动漫', done: false},
      {id: 7, name: '做饭', done: true},
      {id: 8, name: '跑步', done: false},
      {id: 9, name: '带娃', done: true},
      {id: 10, name: '睡觉', done: true},
    ]
  };

  //添加一个todo， todo是对象
  addTodo = (newTodo) => {

    //获取原始todos
    const {todos} = this.state

    //先查找是否已经存在相同
    if (todos.findIndex((todo) => {
      return todo.name === newTodo.name.trim();
    }) !== -1) {  // !== -1 说明找到相同的了。
      alert('已经存在相同的TODO');
      return false;
    }

    //追加一个todo
    const newTodos = [newTodo, ...todos]
    //更新状态
    this.setState({todos: newTodos})
  }

  //更新todo的done状态
  updateTodo = (id, done) => {
    //获取原始todos
    const {todos} = this.state

    //遍历并修改 done 属性
    const newTodos = todos.map((todo) => {
      //如果遍历找到和 id 相等，则修改自身属性 done 为外部的 done
      if (todo.id === id) {
        return {...todo, done: done}
      } else {
        return todo;
      }
    });

    //更新状态
    this.setState({todos: newTodos})
  }

  //删除
  deleteTodo = (id) => {
    //获取原始todos
    const {todos} = this.state

    //过滤并返回，不等当前ID的其他todo
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });

    //更新状态
    this.setState({todos: newTodos})
  }

  //全选
  checkAllTodo = (done) => {
    //获取原始todos
    const {todos} = this.state

    //过滤并返回，不等当前ID的其他todo
    const newTodos = todos.map((todo) => {
      return {...todo, done: done};
    });

    //更新状态
    this.setState({todos: newTodos})
  }

  //清空已完成的
  clearAllDone = () => {
    //获取原始todos
    const {todos} = this.state

    //过滤 清空done=true的todo
    const newTodos = todos.filter((todo) => {
      return !todo.done;
    });

    //更新状态
    this.setState({todos: newTodos})
  }

  render() {

    const {todos} = this.state;

    return (
      <div className="container">

        <div className="panel">
          <div className="panel-head">
            <strong>REACT TODO LIST</strong>
          </div>
          <div className="panel-body">
            <Header addTodo={this.addTodo}/>
            <Main todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          </div>

          <div className="panel-foot">
            <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
          </div>

        </div>

      </div>
    )
  }

}

